<template>
  <div class="container">
    <h1 class="topTitle">Cesium 3D场景还原</h1>
    <div class="mapTest" :style="mapWindowStyle">
      <div id="cesiumContainer" class="fullSize">
        <div id="slider"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as Cesium from 'cesium'

export default {
  name: 'Map3DDemo2',
  components: {
  },
  data() {
    return {
      map3d: null,
      url: "",
      attr: "",
      viewer: null,
      // screenHeight: document.body.clientHeight,
      mapWindowStyle: {
        height: '0px'
      },
      // isFullScreen: true,
    }
  },
  methods: {
    getHeight() {
      this.mapWindowStyle.height = String(window.innerHeight - 120) + 'px';
    }
  },
  created(){
    window.addEventListener('resize', this.getHeight);
    this.getHeight()
  },
  mounted() {
    let viewer = new Cesium.Viewer("cesiumContainer", {
      imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
        url:
            "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
      }),
      baseLayerPicker: false,
      infoBox: false,
    });

    let layers = viewer.imageryLayers;
    let earthAtNight = layers.addImageryProvider(
        new Cesium.IonImageryProvider({ assetId: 3812 })
    );
    earthAtNight.splitDirection = Cesium.ImagerySplitDirection.LEFT; // Only show to the left of the slider.

// Sync the position of the slider with the split position
    let slider = document.getElementById("slider");
    viewer.scene.imagerySplitPosition =
        slider.offsetLeft / slider.parentElement.offsetWidth;

    let handler = new Cesium.ScreenSpaceEventHandler(slider);

    let moveActive = false;

    function move(movement) {
      if (!moveActive) {
        return;
      }

      var relativeOffset = movement.endPosition.x;
      var splitPosition =
          (slider.offsetLeft + relativeOffset) /
          slider.parentElement.offsetWidth;
      slider.style.left = 100.0 * splitPosition + "%";
      viewer.scene.imagerySplitPosition = splitPosition;
    }

    handler.setInputAction(function () {
      moveActive = true;
    }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
    handler.setInputAction(function () {
      moveActive = true;
    }, Cesium.ScreenSpaceEventType.PINCH_START);

    handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE);

    handler.setInputAction(function () {
      moveActive = false;
    }, Cesium.ScreenSpaceEventType.LEFT_UP);
    handler.setInputAction(function () {
      moveActive = false;
    }, Cesium.ScreenSpaceEventType.PINCH_END);


    this.viewer = viewer;
  }
}
</script>

<style lang="stylus" scoped>
@import '../assets/styles/bucketRaw.css'


#slider {
  position: absolute;
  left: 50%;
  top: 0px;
  background-color: #d3d3d3;
  width: 5px;
  height: 100%;
  z-index: 9999;
}

#slider:hover {
  cursor: ew-resize;
}

@import 'cesium/Build/Cesium/Widgets/widgets.css'
.container
  width: 100%
  h1.topTitle
    text-align: center
    color: red
  .mapTest
    border: 1px solid red
    text-align: left
    #cesiumContainer
      height: 100%
      width: 100%

</style>